<!-- 按照标准数据库格式进行格式化的日期选择器组件 -->
<template>
  <a-date-picker
    class="date-picker"
    v-bind="omit(props, ['onUpdate:value', 'onChange'])"
    v-model:value="value"
    :showTime="{ defaultValue: dayjs('00:00:00', DAYJS_TIME_FORMAT) }"
    :format="DAYJS_DATE_FORMAT"
    :valueFormat="DAYJS_DATE_FORMAT"
    @change="onChange"
  />
</template>
<script setup lang="ts">
  import dayjs, { type Dayjs } from 'dayjs';
  import { DAYJS_DATE_FORMAT, DAYJS_TIME_FORMAT } from '@/constants/dayjs';
  import type { CommonProps, DatePickerProps } from 'ant-design-vue/es/date-picker/generatePicker/props';
  import { omit } from 'lodash-es';
  import { ref } from 'vue';

  // 定义类型
  export interface FormatDataPickerProps extends Omit<CommonProps<Dayjs>, 'clearIcon' | 'defaultOpen'>, DatePickerProps<Dayjs> {}

  // 参数配置
  const props = withDefaults(defineProps<FormatDataPickerProps>(), {
    allowClear: true,
    bordered: true,
    nextIcon: undefined,
    open: undefined,
    prevIcon: undefined,
    showNow: undefined,
    showTime: undefined,
    showToday: undefined,
    suffixIcon: undefined,
    superNextIcon: undefined,
    superPrevIcon: undefined,
  });

  // 定义事件
  const emits = defineEmits<{
    change: [val: FormatDataPickerProps['value']];
    'update:value': [val: FormatDataPickerProps['value']];
  }>();

  // 双向绑定value
  const value = ref(props.value);
  // onChange 时触发事件
  function onChange() {
    emits('change', value.value);
    emits('update:value', value.value);
  }
</script>
<style lang="less" scoped>
  .date-picker {
    width: 100%;
  }
</style>
